.download-modal-content {
    $ruler-border: 1px solid $gray-10;
    $download-button-fill: $blue-5;
    $hover-fill: $accent-pale-blue;
    $active-fill: $blue-20;

    color: $dark-text;

    // necessary for scrolling
    display: flex;
    flex-direction: column;

    .download-modal__tab-list {
        --tabs-font-size: 14px;

        padding: 0 var(--modal-padding);

        .Tabs__Tab {
            // Tabs should fill the whole available width
            flex-basis: 100%;
        }
    }

    .download-modal__tab-panel {
        margin-top: 16px;

        flex: 1 1 auto;
        overflow-y: auto;

        // needed for the loading indicator
        position: relative;
        min-height: 100px;
    }

    .download-modal__tab-content {
        padding: 0 var(--modal-padding);
        margin-bottom: 24px;
    }

    .download-modal__vis-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .download-modal__data-section {
        padding-bottom: 16px;

        display: flex;
        flex-direction: column;
        gap: 8px;

        + .download-modal__data-section {
            border-top: $ruler-border;
            padding-top: 16px;
        }

        &:last-child {
            padding-bottom: 0;
        }
    }

    .download-modal__download-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: $blue-90;
        background-color: $download-button-fill;
        width: 100%;
        padding: 16px;
        text-align: left;
        cursor: pointer;

        &:not(.download-modal__download-button--loading) {
            &:hover,
            &:active {
                background-color: $hover-fill;
            }
        }

        + .download-modal__download-button {
            margin-top: 2px;
        }

        .download-modal__option-icon {
            margin-right: 12px;
            display: flex;
        }

        .download-modal__download-preview-img img {
            display: block;
            box-shadow:
                0px 0px 0px 0px rgba(49, 37, 2, 0.03),
                0px 6px 13px 0px rgba(49, 37, 2, 0.03),
                0px 93px 37px 0px rgba(49, 37, 2, 0.01),
                0px 145px 41px 0px rgba(49, 37, 2, 0);
            padding: 0;
            margin: 0 24px 0 0;
        }

        .download-modal__download-button-content {
            flex: 1;
        }

        .download-modal__download-button-description-wrapper {
            position: relative;
        }

        .download-modal__download-button-description,
        .download-modal__download-button-loading-label {
            color: $bluish-grey-text-color;
        }

        // Hide the description and use an overlay for the 'Downloading...' label
        // to keep the button height fixed and avoid a layout shift
        &.download-modal__download-button--loading
            .download-modal__download-button-description {
            visibility: hidden;
        }

        .download-modal__download-button-loading-label {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }

        .download-modal__download-icon {
            padding: 0 8px 0 16px;
            font-size: 16px;
        }

        &.download-modal__download-button--variant-copy {
            display: flex;
            padding: 8px;
            padding-left: 12px;
            padding-right: 12px;
            margin-right: 0px;
            margin-left: auto;
            gap: 4px;
            font-size: 11px;
            width: auto;
        }

        &.download-modal__download-button--loading {
            cursor: not-allowed;
            opacity: 0.8;
        }
    }

    .download-modal__config-list {
        display: flex;
        flex-direction: column;
        gap: 16px;

        padding-bottom: 8px; // 8px padding + 8px gap
        padding-top: 16px;

        + .download-modal__config-list {
            border-top: $ruler-border;
        }

        // Radio label
        .label {
            @include grapher_label-1-regular;
        }

        // "Example" label
        p {
            margin-top: 4px;
            margin-bottom: 0;
            margin-left: 24px;
            font-size: 13px;
            line-height: 1.3;
        }

        // Example column name
        code {
            background-color: $gray-10;
            color: $gray-70;
            padding: 2px 4px;
            font-family: $monospace-font-stack;
            // Fix broken "fi" ligature in Menlo.
            font-feature-settings: "liga" 0;

            white-space: normal;

            // Make it so we get nice paddings around line breaks
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
        }
    }

    .download-modal__api-urls {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .download-modal__sources {
        font-size: 14px;
        line-height: 1.3;
    }

    .download-modal__data-sources {
        line-height: 1.4;
        margin-bottom: 4px; // 4px margin + 8px gap

        .download-modal__data-sources-list {
            display: inline;
            list-style: none;

            li {
                display: inline;

                &::after {
                    display: inline-block;
                    white-space: pre;
                    content: "; ";
                }

                &:last-child::after {
                    content: none;
                }

                a {
                    @include owid-link-90;
                    color: $gray-80;
                }
            }
        }
    }

    .download-modal__callout {
        background: $gray-10;
        padding: 16px;

        svg {
            margin-right: 8px;
        }

        .title {
            font-size: 16px;
            color: $blue-90;
        }

        p {
            color: $blue-60;
            margin: 8px 0 0;
            line-height: 1.3;
        }

        ul {
            margin: 0;
            padding-left: 18px;
            line-height: 1.5;
        }

        a {
            @include owid-link-60;
            text-underline-offset: 2px;
        }
    }

    .download-modal__code-blocks,
    .download-modal__api-urls {
        display: flex;
        flex-direction: column;
        gap: 16px;

        h4 {
            margin-bottom: 8px;
            font-size: 14px;
        }
    }

    .download-modal__heading-with-caption {
        margin-bottom: 8px;

        h3 {
            margin-bottom: 6px;
        }

        p {
            color: $gray-60;
            margin: 0;
        }

        a {
            @include owid-link-90;
            color: $gray-70;
        }
    }
}

&.GrapherComponentNarrow .download-modal-content {
    .download-modal__download-preview-img img {
        display: none;
    }
}
